<template>
	<div class="hy-container">
		<HyTable
			:searchFields="searchFields"
			:searchConfig="searchConfig"
			:searchDefault="searchDefault"
			:tableConfig="tableConfig"
			:tableColumns="tableColumns"
			ref="hyTableRef"
			:type="'tabs'"
			:tabls="tabls"
			@handleClick="handleClick"
			@sendSearchData="getSearchData"
			@sendState="getState"
		>
			<template #tableHeader>
				<el-button type="primary" @click="handleOperate('add')" icon="Plus" v-if="searchDefault.blacklist === '0'">新增</el-button>
				<el-button @click="handleOperate('import')" icon="upload" v-if="searchDefault.blacklist === '0'">导入</el-button>
				<el-button @click="handleOperate('export')" icon="download" v-if="searchDefault.blacklist === '0'">导出</el-button>
				<el-button @click="handleOperate('template')" icon="document" v-if="searchDefault.blacklist === '0'">模板下载</el-button>
			</template>
			<template #statusSlot="{ row }">
				<el-tag :class="setColor(row.status)">{{ row.statusName }}</el-tag>
			</template>
			<template #expertTypeArr="{ row }">
				{{ formatteCascader(row.expertTypeArr || [], expert_type) }}
			</template>
			<template #operation>
				<el-table-column fixed="right" label="操作" width="130">
					<template #default="{ row }">
						<div class="flex items-center w-full justify-between">
							<el-button text type="primary" icon="View" @click="handleOperate('view', row)">查看</el-button>
							<el-button text type="primary" icon="CircleCheck" @click="handleOperate('recover', row)" v-if="searchDefault.blacklist === '1'"
								>移出</el-button
							>
							<el-dropdown v-if="searchDefault.blacklist !== '1' && row.status !== '2'" style="color: var(--el-color-primary)">
								<span class="el-dropdown-link">
									更多
									<el-icon class="el-icon--right">
										<arrow-down color="var(--el-color-primary)" />
									</el-icon>
								</span>
								<template #dropdown>
									<el-dropdown-menu>
										<el-dropdown-item
											style="color: var(--el-color-primary)"
											:icon="Document"
											@click="handleOperate('submit', row)"
											v-if="row.status === '1' || row.status === '4'"
											>提交</el-dropdown-item
										>
										<el-dropdown-item
											v-if="row.status === '1' || row.status === '4'"
											style="color: #52c41a"
											:icon="Edit"
											@click="handleOperate('edit', row)"
											>编辑</el-dropdown-item
										>
										<el-dropdown-item
											style="color: #f74e56"
											:icon="Delete"
											v-if="row.status === '1' || row.status === '4'"
											@click="handleOperate('delete', row)"
											>删除</el-dropdown-item
										>
										<el-dropdown-item style="color: #f74e56" :icon="Failed" v-if="row.status === '3'" @click="handleOperate('blackList', row)"
											>移入黑名单</el-dropdown-item
										>
									</el-dropdown-menu>
								</template>
							</el-dropdown>
						</div>
					</template>
				</el-table-column>
			</template>
		</HyTable>
		<UploadExcel @refreshDataList="refreshDataList" ref="UploadExcelRef" title="专家数据" :url="url" />
	</div>
</template>
<script lang="ts" setup>
import HyTable from '/@/components/HyTable/index.vue';
import { expertInfoPageApi } from '/@/api/expertDatabase/expert';
import { useDict } from '/@/hooks/dict';
import UploadExcel from '/@/components/Upload/Excel.vue';
import other from '/@/utils/other';
import { ArrowDown, Document, Edit, Delete, Failed } from '@element-plus/icons-vue';
import { formatteCascader } from '/@/utils/hyFunc';
import { useTreeDict } from '/@/hooks/dict';
import { useOperate } from '../hooks/useOperate';

const { expert_type } = useTreeDict('expert_type');
const { industry_fields } = useDict('industry_fields');
const tableColumns = computed(() => {
	let { columns } = useOperate();
	let newColumns = [];
	newColumns = [...columns.slice(0, 7), { prop: 'rejectionFrequency', label: '拒绝次数', width: 100 }, ...columns.slice(7)];
	if (searchDefault.value.blacklist === '0') {
		newColumns.push({ prop: 'status', label: '状态', slot: 'statusSlot', width: 160, fixed: 'right' });
	} else {
		newColumns.push({ prop: 'reasonBlacklist', label: '移入黑名单理由', width: 300, fixed: 'right' });
	}
	return newColumns;
});
const tableConfig = computed(() => {
	return {
		request: expertInfoPageApi,
	};
});
//刷新表格
const refreshDataList = () => {
	hyTableRef.value?.handleSearch();
};
// 配置搜索
const searchFields = computed(() => {
	return {
		expertName: {
			type: 'input',
			label: '姓名',
		},
		expertTel: {
			type: 'input',
			label: '手机号',
		},
		expertType: {
			type: 'cascader',
			label: '专家类别',
			options: expert_type.value,
			showAllLevels: true,
		},
		industryFields: {
			type: 'select',
			label: '擅长行业领域',
			options: industry_fields.value,
		},
	};
});
const searchConfig = computed(() => {
	return {
		labelWidth: '120px',
		type: 'search',
		title: '专家管理',
		show: true,
	};
});
const searchDefault = ref({
	blacklist: '0',
});
//操作
const url = ref<string>('');
const UploadExcelRef = ref<any>(null);
const hyTableRef = ref();
const handleOperate = (
	operateType: string,
	row = {
		expertInfoId: '',
		processInstanceId: '',
	}
) => {
	const { expertInfoId, processInstanceId } = row;
	const blackList = searchDefault.value.blacklist;
	const handleSearch = hyTableRef.value.handleSearch;
	const { routerGo, deleteData } = useOperate({ expertInfoId, processInstanceId, operateType, blackList }, hyTableRef.value.handleSearch);
	switch (operateType) {
		case 'add':
		case 'view':
		case 'submit':
		case 'edit':
			routerGo();
			break;
		case 'export':
			other.downBlobFile('/manage/expertInfo/export', { ...exportParams.value }, `专家信息.xlsx`);
			break;
		case 'import':
			url.value = '/manage/expertInfo/importInfo';
			UploadExcelRef.value.show();
			break;
		case 'template':
			other.downBlobFile('/manage/local/file/专家信息模板.xlsx', {}, `专家信息模板.xlsx`);
			break;
		case 'blackList':
			const { moveInBlackList } = useOperate(row, handleSearch);
			moveInBlackList();
			break;
		case 'delete':
			deleteData();
			break;
		case 'recover':
			const { moveOutBlackList } = useOperate(row, handleSearch);
			moveOutBlackList();
			break;
		default:
			break;
	}
};
//获取table数据
const state: any = ref();
const getState = (data: any) => {
	state.value = data;
};
//获取搜索数据
const exportParams: any = ref();
const getSearchData = (data: any) => {
	exportParams.value = data;
};
const tabls = computed(() => {
	return {
		type: 'card',
		tablesList: [
			{
				lable: '基本库',
				value: '0',
			},
			{
				lable: '黑名单',
				value: '1',
			},
		],
	};
});
//设置颜色
const setColor = (type: string) => {
	switch (type) {
		case '1':
			return 'start-tag';
		case '2':
			return 'wait-tag';
		case '3':
			return 'agree-tag';
		case '4':
			return 'refuse-tag';
		default:
			break;
	}
};
const handleClick = (blacklist: string) => {
	searchDefault.value.blacklist = blacklist;
	setTimeout(() => {
		hyTableRef.value.handleSearch();
	}, 10);
};
</script>
<style scoped lang="scss"></style>
